<template>
    <div id="cesiumContainer"></div>

    <!-- 控制面板抽屉 -->
    <el-drawer v-model="drawerVisible" title="控制面板" direction="ltr" size="300px">
        <div class="control-panel">

            <div class="control-item">
                <div class="label">地理图层</div>
                <el-select v-model="selectedLayer" @change="changeLayer" placeholder="请选择图层" style="width: 100%">
                    <el-option label="卫星影像" value="satellite"></el-option>
                    <el-option label="矢量地图" value="vector"></el-option>
                    <el-option label="矢量+标注" value="vectorWithLabels"></el-option>
                    <el-option label="影像+标注" value="satelliteWithLabels"></el-option>
                </el-select>
            </div>

            <!-- 点标显示控制 -->
            <div class="control-item">
                <el-switch v-model="showCountryMarkers" @change="toggleCountryMarkers" active-text="国家点标" />
            </div>
            <div class="control-item">
                <el-switch v-model="showCityMarkers" @change="toggleCityMarkers" active-text="城市点标" />
            </div>
        </div>
    </el-drawer>

    <!-- 抽屉触发按钮 -->
    <div class="drawer-trigger" @click="drawerVisible = true">
        <el-button type="primary" :icon="Setting" circle size="large" />
    </div>

    <!-- 返回按钮 -->
    <div class="back-trigger" @click="router.back()">
        <el-button type="primary" :icon="ArrowLeftBold" circle size="large" />
    </div>
    <dialogCesium v-model="dialogVisible" :dialogContent="dialogContent"></dialogCesium>
</template>

<script setup>
import dialogCesium from './component/dialogCesium.vue';
import { onMounted, ref, onUnmounted, watch } from 'vue'
import { Setting, ArrowLeftBold } from '@element-plus/icons-vue'
import "cesium/Build/Cesium/Widgets/widgets.css";
import '../../widgets.css';
import initCesium from './js/cesium'
import { updateMapLayer } from './js/cesium';
import { dialogContent, dialogVisible } from './js/cesium';
const router = useRouter();

// 控制面板相关
const drawerVisible = ref(false);
const selectedLayer = ref('satellite'); // 默认选择矢量地图
const showCityMarkers = ref(false);   // 默认显示城市点标
const showCountryMarkers = ref(false); // 默认显示国家点标

let cesiumViewer = null; // 保存 Cesium Viewer 实例
let cityEntities = [];   // 保存城市实体引用
let countryEntities = []; // 保存国家实体引用

// 图层切换函数
const changeLayer = (layerType) => {
    if (cesiumViewer) {
        updateMapLayer(cesiumViewer, layerType);
    }
};

// 更新所有标记的显示状态
const updateMarkersVisibility = () => {
    // 更新城市点标显示状态
    cityEntities.forEach(entity => {
        const distanceVisible = entity._distance <= 2000000; // 2000公里
        if (entity.billboard) {
            entity.billboard.show = showCityMarkers.value && distanceVisible;
        }
        if (entity.label) {
            entity.label.show = showCityMarkers.value && distanceVisible;
        }
    });

    // 更新国家点标显示状态
    countryEntities.forEach(entity => {
        const distanceVisible = entity._distance <= 9000000 && entity._distance >= 500000; // 500公里到9000公里
        if (entity.billboard) {
            entity.billboard.show = showCountryMarkers.value && distanceVisible;
        }
        if (entity.label) {
            entity.label.show = showCountryMarkers.value && distanceVisible;
        }
    });
};

// 切换城市点标显示
const toggleCityMarkers = () => {
    updateMarkersVisibility();
};

// 切换国家点标显示
const toggleCountryMarkers = () => {
    updateMarkersVisibility();
};

// 监听距离变化并更新显示状态
let updateTimer = null;
const startDistanceMonitoring = () => {
    // 定期检查并更新标记显示状态
    updateTimer = setInterval(() => {
        updateMarkersVisibility();
    }, 500); // 每500毫秒检查一次
};



// 初始化
onMounted(async () => {
    const result = await initCesium();
    cesiumViewer = result.viewer;
    cityEntities = result.cityEntities;
    countryEntities = result.countryEntities;

    // 开始监控距离变化
    startDistanceMonitoring();
});

// 组件卸载时清理
onUnmounted(() => {
    cesiumViewer = null;
    cityEntities = [];
    countryEntities = [];
    if (updateTimer) {
        clearInterval(updateTimer);
    }
});
</script>

<style lang="scss" scoped>
#cesiumContainer {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

::deep(.cesium-viewer .cesium-viewer-bottom) {
    display: none !important;
}

.drawer-trigger {
    position: absolute;
    top: 20px;
    left: 80px;
    z-index: 1000;
}

.back-trigger {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.control-item {
    margin-bottom: 10px;

    .label {
        font-size: 13px;
        margin-bottom: 5px;
        color: #666;

        &::after {
            content: ":";
        }
    }

    &:last-child {
        margin-bottom: 0;
    }
}
</style>